<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>电脑端直播聊天室</title>
    <link rel="stylesheet" href="/web/font/css/font-awesome.css">
    <link rel="stylesheet" href="/web/layui/css/layui.css">
    {{--    <link rel="stylesheet" href="/web/chat/chat-style.css">--}}
    <style>
        body{
            margin: 0;
            padding: 0;
            background: #e2e2e2;
            font-size:15px;
            /*position: relative;*/
        }
        #phone{
            width: 94%;
            margin: 0 auto;
            padding-top: 15px;
            overflow:hidden;
        }
        /*聊天内容区 start*/
        /*中间聊天去样式 start*/
        #ul{
            overflow-x: hidden;
            overflow-y: auto;
            /*height: 100%;*/
        }
        #ul::-webkit-scrollbar {
            width: 4px;
            /*height: 4px;*/
        }
        #ul::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0,0,0,0.2);
        }
        #ul::-webkit-scrollbar-track {
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }
        #ul img{
            width: 40px;
            height: 40px;
            border-radius: 5px;
            border:1px solid gainsboro;
        }
        #ul li{
            width:100%;
            list-style: none;
            margin-bottom: 10px;
        }
        .chat-right{
            float:right;
        }
        .chat-left{
            float:left;
        }
        #ul .chat-left .chat-headpic{
            float:left;
        }
        #ul .chat-right .chat-headpic{
            float:right;
        }
        /*#ul li:last-child{*/
        /*    margin-bottom: 115px;*/
        /*}*/

        #ul .content-left,#ul .content-right{
            padding:10px;
            border-radius: 8px;
            position: relative;
            min-height: 20px;
        }
        #ul .content-left{
            margin-left: 10px;
            background: #ffffff;
            float: left;
            max-width: 70%;
        }
        #ul .content-right{
            margin-right: 10px;
            background: #98e165;
            float: right;
            max-width: 70%;
        }
        .content-left::after,.content-right::after{
            content:"";
            position:absolute;
            border-top:6px solid transparent;
            border-bottom:6px solid transparent;
            top:9px;
        }
        .content-left::after{
            border-right:6px solid #ffffff;
            left:-6px;
        }
        .content-right::after{
            border-left:6px solid #98e165;
            right:-6px;
        }

        /*中间聊天去样式 end*/
        /*聊天内容区 end*/

        /*文本输入区 start*/
        .chat-operate{
            position: fixed;
            bottom: 0;
            width: 100%;
            left: 0;
            right: 0;
            background: #f8f8f8;
        }

        .use-more{
            height: 36px;
            padding:0 10px;
            display: flex;
        }
        .use-more .layui-icon{
            font-size: 26px;
            color:#FF5722;
            line-height:36px;
            margin:0 5px;
        }
        .chat-operate .line{
            display: flex;
            background: #f8f8f8;
            position: relative;
        }
        .chat-operate textarea{
            min-height: 160px !important;
            padding: 10px;
            width: 100%;
            border:none;
            border-top: 1px solid gainsboro;
            font-size: 16px;
        }
        #send-box{
            display: flex;
            position: absolute;
            bottom: 10px;
            right: 5px;
        }
        #send-box .layui-btn{
            width: 60px;
        }
        /*文本输入区 end*/
        /*聊天内容区 end*/

        /*表情展示区域 start*/
        #chatbox-emoji-box{
            display: none;
            position: fixed;
            z-index: 99;
            padding: 5px 0;
            margin-top: -147px;
            background: #ffffff;
            left: 0;
            width: 100%;
        }
        #chatbox-emoji-box.show{
            display: block;
        }
        #chatbox-emoji-box span{
            margin: 3px;
        }

        /*表情展示区域 end*/

        /*聊天提示 */
        .chat-notice{
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: fixed;
            top: 0;
            background: #ffffff;
            z-index: 99;
        }

        /*bootstrap sweet alert 样式 start*/
        .swal-icon:first-child {
            margin-top: 20px;
        }
        .swal-text{
            text-align: center;
        }
        .swal-footer{
            margin-top:0;
            text-align: center !important;
        }

        .swal-icon{
            margin: 15px auto;
            width: 65px;
            height: 65px;
        }
        .swal-icon--error__line{  /*错误号线条*/
            height: 5px;
            width: 45px;
            top: 31px;
        }
        .swal-icon--error__line--left{ /*x号的左线条*/
            left: 11px;
        }
        .swal-icon--error__line--right{
            right:9px;
        }
        /*bootstrap sweet alert 样式 end*/
    </style>
</head>
<body data-avatar="{{$info['avatar']}}">
<div id="phone">
    <ul id="ul" class="chat-user-part"></ul>

    <div class="chatbox-emoji-box" id="chatbox-emoji-box"></div>
    <div class="chat-operate">
        <div class="use-more">
            <i class="layui-icon layui-icon-face-smile" id="chatbox-icon"></i>
        </div>

        <div class="line">
            <textarea name="desc" id="desc" placeholder="请输入内容" autocomplete="off" class="layui-input"></textarea>
            <div id="send-box">
                <div class="chat-cancel layui-btn layui-btn-primary layui-btn-sm">取消</div>
                <div class="chat-send layui-btn layui-btn-normal layui-btn-sm" id="chat-send">发送</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script src="/web/layui/layui.js"></script>
<script src="/web/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
<script>
    var rongKey     = "{{$info['key']}}",
        rongToken   = "{{$info['token']}}",
        chatRoomId  = "{{$chatRoomId}}",    //房间号
        ownUserInfo = {
            uid:    "{{$info['uid']}}",
            name:   "{{$info['nickname']}}",
            avatar: "{{$info['avatar']}}",
        };

    var _token     = "{{csrf_token()}}";           //聊天对象的id
    var talker_uid = "2"; //聊天对方的信息

    var winH = $(window).height(); //屏幕高度
    var chat_operateH = $(".chat-operate").height();

    var m = navigator.userAgent;
    var isAndroid = m.indexOf('Android') > -1 || m.indexOf('Adr') > -1;   //android终端
    var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);               //ios终端   
    if (isIos) {
        $("[name='desc']").on("blur",function () {
            $("[name='desc']").focus();
            // window.scroll(0,0);//input框失焦后，窗口还原
        });
        $("[name='desc']").on("focus",function () {
            // $(this).focus();
            $("body").css("height",(winH - chat_operateH - 50) + "px")
            // window.scroll(0,0);//input框失焦后，窗口还原
        });

        document.body.addEventListener('focusout', () =>{
            $("body").css("height",winH + "px")
        })
    }

    //动态决定聊天区的高度
    $(function () {
        var height = $(window).height();
        var chatHeight = (height - 225) + "px";
        $("#ul").css("height",chatHeight)
    })


    // 聊天区上传图片操作
    layui.use(['upload','layer'], function(){
        var upload = layui.upload;
        var layer  = layui.layer;
    });

</script>

<script src="https://cdn.ronghub.com/RongIMLib-2.5.5.min.js"></script>
<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
<script src="/web/chat/main.js"></script>
<script src="/web/chat/chat.js"></script>
